<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/jquery/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>





</body>

</html>

<script>

    function showTips(content,time){
        var mask = `<div class="toast"></div>`
      

        $('body').append(mask)
        $(".toast").css({
            'position':'fixed',
            'left':0,
            'top':0,
            'width':'100%',
            'height':'100%',
            'z-index':1000

        }).show()
        var tips = `<div class="item">${content}</div>`
        console.log(tips)
        $('.toast').append(tips)
        $('.item').css({
            'position':'fixed',
            'display':'inline-block',
            'top':'50%',
            left:'50%',
            'transform':"translate(-50%,-50%)",
            'padding-top':"10px",
            'padding-bottom':'10px',
            'padding-left':'20px',
            'padding-right':'20px',
            'border-radius':'10PX',
            'height':"50px",
            'line-height':'50px',
            'color':"#fff",
            'background-color':"black"
        }).show()
        setTimeout(function(){
            $('.toast,.item').fadeOut()

        },time*1000)



    }

</script>